<template>
    <view class="page-container">
        <!-- 主页面内容 -->
        <view class="main-content">
            <button @click="openRecordModal" class="open-modal-btn">打开录音</button>
            
            <!-- 新增用户输入框 -->
            <view class="input-container">
                <input 
                    class="user-input" 
                    type="text" 
                    v-model="userInput" 
                    placeholder="请在此输入文字"
                />
            </view>
            
            <!-- 添加API响应显示区域 -->
            <view class="response-message" v-if="apiResponseMsg">
                <text>{{ apiResponseMsg }}</text>
            </view>
            
            <!-- 新增输入框显示识别结果 -->
            <view class="input-container" v-if="apiResponseMsg">
                <input 
                    class="recognition-input" 
                    type="text" 
                    v-model="apiResponseMsg" 
                    placeholder="语音识别结果将显示在这里" 
                    disabled
                />
            </view>
        </view>
        
        <!-- 使用VoiceRecorder组件 -->
        <voice-recorder 
            :visible="showModal" 
            @close="closeModal"
            @recognition-result="handleRecognitionResult"
            @recognition-status="handleRecognitionStatus"
        />
    </view>
</template>

<script>
// 导入VoiceRecorder组件
import VoiceRecorder from '@/components/VoiceRecorder.vue'
	import {
		formatLicensePlate
	} from '../../utils/licensePlateUtils.js';
export default {
    // 注册组件
    components: {
        VoiceRecorder
    },
    data() {
        return {
            showModal: false, // 控制弹窗显示
            apiResponseMsg: '', // API响应消息
            userInput: '' // 用户输入文字
        };
    },
    methods: {
        // 打开录音弹窗
        openRecordModal() {
            this.showModal = true;
            // 清空上一次的API响应消息
            this.apiResponseMsg = '';
        },
        
        // 关闭录音弹窗
        closeModal() {
            this.showModal = false;
        },
        
        // 处理语音识别结果
        handleRecognitionResult(result) {
            this.apiResponseMsg = formatLicensePlate(result);
			;
        },
        
        // 处理识别状态提示
        handleRecognitionStatus(status) {
            // 在弹窗关闭后显示提示
            setTimeout(() => {
                if (status === '文字识别成功') {
                    uni.showToast({
                        title: '文字识别成功',
                        icon: 'success',
                        duration: 2000
                    });
                } else if (status === '文字识别失败') {
                    uni.showToast({
                        title: '文字识别失败',
                        icon: 'error',
                        duration: 2000
                    });
                }
            }, 300); // 略微延迟，确保在弹窗关闭后显示
        }
    }
}
</script>

<style>
/* 页面容器 */
.page-container {
    min-height: 100vh;
    padding: 20px;
    background-color: #f5f7fa;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* 主内容区域 */
.main-content {
    width: 100%;
    max-width: 600px;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 50px;
}

/* 打开按钮 */
.open-modal-btn {
    background-color: #007aff;
    color: white;
    border: none;
    border-radius: 8px;
    padding: 12px 24px;
    font-size: 16px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

.open-modal-btn:active {
    background-color: #0062cc;
    transform: translateY(2px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* API响应消息样式 */
.response-message {
    margin-top: 20px;
    padding: 15px;
    background-color: #f5f5f5;
    border-radius: 8px;
    max-width: 80%;
    word-break: break-word;
}

/* 输入框容器样式 */
.input-container {
    margin-top: 20px;
    width: 100%;
    max-width: 500px;
}

/* 输入框样式 */
.recognition-input {
    width: 100%;
    height: 44px;
    border: 1px solid #dcdfe6;
    border-radius: 8px;
    padding: 0 15px;
    font-size: 16px;
    background-color: #ffffff;
    color: #333;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

/* 用户输入框样式 */
.user-input {
    width: 100%;
    height: 44px;
    border: 1px solid #dcdfe6;
    border-radius: 8px;
    padding: 0 15px;
    font-size: 16px;
    background-color: #ffffff;
    color: #333;
    margin-top: 20px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}
</style>    